<template>
  <div class="hot-box">
    <h2>滔Ker热门</h2>
    <div class="bigbox"> 
        <a href=""><img src="../../assets/index-img/hot1.jpg" alt="" /></a>
    </div>
    <ul class="list">
        <li>
            <h5 class="one">NO.<i>1</i></h5>
            <span class="text">一起玩转“博金总动员”</span>
            <img src="../../assets/index-img/hot2.jpg" alt="">
        </li>
        <li>
            <h5 class="two">NO.<i>2</i></h5>
            <span class="text">AJ3还能当婚鞋穿</span>
            <img src="../../assets/index-img/hot3.jpg" alt="">
        </li>
        <li>
            <h5 class="three">NO.<i>3</i></h5>
            <span class="text">为什么大家都爱熊猫Dunk</span>
            <img src="../../assets/index-img/hot4.jpg" alt="">
        </li>
    </ul>
    <ul class="player">
        <li>
            <img src="../../assets/index-img/hot5.jpg" alt="">
            <h4>咬一口奶油</h4>
            <i>球鞋玩家</i>
            <span>去看看</span>
        </li>
        <li>
            <img src="../../assets/index-img/hot6.jpg" alt="">
            <h4>Tong是瞳...</h4>
            <i>球鞋玩家</i>
            <span>去看看</span>
        </li>
        <li>
            <img src="../../assets/index-img/hot7.jpg" alt="">
            <h4>Harvery松松</h4>
            <i>球鞋玩家</i>
            <span>去看看</span>
        </li>
        <li>
            <img src="../../assets/index-img/hot5.jpg" alt="">
            <h4>咬一口奶油</h4>
            <i>球鞋玩家</i>
            <span>去看看</span>
        </li>
        <li>
            <img src="../../assets/index-img/hot6.jpg" alt="">
            <h4>Tong是瞳...</h4>
            <i>球鞋玩家</i>
            <span>去看看</span>
        </li>
        <li>
            <img src="../../assets/index-img/hot7.jpg" alt="">
            <h4>Harvery松松</h4>
            <i>球鞋玩家</i>
            <span>去看看</span>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "hot",
  data() {
    return {};
  },
};
</script>
<style>
body {
  padding: 0;
  margin: 0;
}
* {
  padding: 0;
  margin: 0;
}
a {
  display: block;
  height: auto;
  line-height: 0;
}
.hot-box {
  width: 100%;
  height: auto;
  background-color: #fff;
  display: flex;
  margin-top: .2rem;
  justify-content: space-between;
  flex-direction: column;
}
h2{
    font-size: .22rem;
    line-height: .55rem;
    margin-left: .15rem;
}
.bigbox{
    width: 100%;
    margin-bottom: 1px;
}
ul{
    list-style: none;
    width: 100%;
}
.list{
    display: flex;
    flex-direction: column;
}
.list>li{
    box-sizing: border-box;
    height: .7rem;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-around;
    padding: .05rem .25rem .05rem .1rem;
}
.list>li>h5{
    width: .6rem;
    text-align: center;
    font-size: .14rem;
}
.one{
    color: #f2ca58;
}
.two{
    color: #b1b8c2;
}
.three{
    color: #b5a284;
}
i{
    font-style: normal;
    font-size: .18rem;
}
.list>li>.text{
    flex: 1;
    font-size: .14rem;
    font-weight: 600;
    padding-left: .1rem;
}
.list>li>img{
    width: .5rem;
}
.player{
    display: flex;
    flex-shrink: 0;
    overflow-x: auto;
    align-items: center;
    padding-right: .15rem;
    padding:.2rem .15rem;
}
.player>li{
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    width: .95rem;
    height: 1.5rem;
    align-items: center;
    justify-content: center;
    margin-right: .1rem;
}
.player>li>img{
    width: .45rem;
}
.player>li>h4{
    font-size: .12rem;
    margin: .05rem 0;
}
.player>li>i{
    font-size: .1rem;
    color: #b8b099;
}
.player>li>span{
    width: .75rem;
    height: .25rem;
    background-color: #f0c42d;
    font-size: .12rem;
    text-align: center;
    line-height: .25rem;
    margin-top: .05rem;
}
</style>
